<template>
    <div>
        <el-card>
            <el-form :model="queryForm" :inline='true'>
                <el-form-item label="标 题">
                    <el-input type="text" v-model="queryForm.title" size="small"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称">
                    <el-input type="text" v-model="queryForm.nickname" size="small"></el-input>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="queryForm.status" size="small">
                        <el-option v-for="(item,index) in statusList" :key="'status-'+index" :value="item.value" :label="item.msg"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="size" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button size="size" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="mt12">
            <div class="handel-btns">
                <div class="left-btns">
                </div>
                <div class="right-btns">
                    <el-button size="small" icon="el-icon-refresh" circle @click="getList"></el-button>
                </div>
            </div>
            <el-table :data="userList" style="wdith:100%" border class="mt12">
                <el-table-column prop="id" label="ID" width="60px"></el-table-column>
                <el-table-column prop="title" label="标 题"></el-table-column>
                <el-table-column prop="nickname" label="用户昵称"></el-table-column>
                <el-table-column prop="content" label="内 容">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top" width="300">
                            <p>{{scope.row.content}}</p>
                            <div slot="reference">
                            <span class="ellipsis">{{scope.row.content}}</span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="watchCount" sortable label="观看数量" width="120px"></el-table-column>
                <el-table-column prop="remarkCount" sortable label="评论数量" width="120px"></el-table-column>
                <el-table-column prop="likeCount" sortable label="获赞数量" width="120px"></el-table-column>
                <el-table-column prop="createTime" sortable label="发布时间"></el-table-column>
                <el-table-column prop="status" label="审核状态">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.status" size="small" @change="updateStatus(scope.row.id,scope.row.status)">
                            <el-option v-for="(item,index) in statusList" :key="'status-'+index" :value="item.value" :label="item.msg"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-link icon="el-icon-view" @click="handleView(scope.row.id)">查看帖子</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            :current-page="queryForm.pageNo" 
            :page-size="queryForm.pageSize"
            :total="total"
            :page-sizes="[10,20,50,100]"
            layout="total,sizes,prev,pager,next"
            @current-change='handleCurrentChange'
            @size-change='handleSizeChange'>
            </el-pagination>
        </el-card>
        <el-dialog :title="title" :visible.sync="show" @close="closeDialog">
            <el-form :model="submitForm" :inline="true" label-width="120px" ref="submitForm">
                <div class="swiper-box">
                    <el-carousel arrow="always" :autoplay="false" height="300px">
                        <el-carousel-item v-for="item in swiperImgs" :key="item">
                            <el-image :src="item" :preview-src-list="swiperImgs" fit="contain" style="height: 100%;width: 100%;"></el-image>

                        </el-carousel-item>
                    </el-carousel>
                </div>
                <el-row>
                    <el-col>
                        <el-form-item label="用户昵称">
                            <el-input type="text" v-model="submitForm.nickname" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="帖子标题">
                            <el-input type="text" v-model="submitForm.title" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="帖子内容">
                            <el-input type="textarea" :rows="8" v-model="submitForm.content" readonly style="width:600px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {listPost,updatePost,getPost} from '@/api/Post'
    export default {
        name:'Post',
        data(){
            return{
                total:120,
                queryForm:{
                    pageNum:1,
                    pageSize:10,
                    orderByColumn:'id',
                    isAsc:'desc'
                },
                show:false,
                title:"查看帖子",
                baseUrl:"https://15p6j61608.yicp.fun",
                submitForm:{
                    title:'',
                    nickname:'',
                    content:''
                },
                selectList:[],
                swiperImgs:[],
                statusList:[
                    {value:-1,msg:"拒绝通过"},
                    {value:0,msg:"等待审核"},
                    {value:1,msg:"审核通过"}
                ],
                userList:[]
            }
        },
        created(){
            this.getList()
        },
        methods:{
            handleReset(){
                this.queryForm = {
                    pageNum:1,
                    pageSize:10
                }
                this.getList()
            },
            handleSearch(){
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleSizeChange(pageSize){
                this.queryForm.pageSize = pageSize
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleCurrentChange(pageNum){
                this.queryForm.pageNum = pageNum
                this.getList()
            },
            getList(){
                listPost(this.queryForm).then(res=>{
                    this.userList = res.data.records
                    for(var i=0;i < this.userList.length;i++){
                        this.userList[i].createTime = this.formatDate(this.userList[i].createTime)
                    }
                    this.total = res.data.total
                }).catch(err=>{console.log(err)})
            },
            updateStatus(id,status){
                this.$confirm("你确定修改id为"+id+"的审核状态吗？","提示",{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type:"warning"
                }).then(()=>{
                    //调接口更新
                    getPost(id).then(res=>{
                        var postInfo = res.data
                        postInfo.status = status
                        updatePost(postInfo).then(response => {
                            //修改成功
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            })
                            //刷新列表
                            this.getList()
                        })
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    })
                })
            },
            handleView(id){
                this.show = true
                getPost(id).then(res=>{
                    this.submitForm = res.data
                    let imageObject = JSON.parse(res.data.image)
					for(var i=0;i<imageObject.imgCount;i++){
						this.swiperImgs.push(this.baseUrl+'/image/posts/'+imageObject.userId+'/'+imageObject.postCount+'/'+i+'.png')
					}
                })
            },
            closeDialog(){
                this.swiperImgs = []
                this.show = false
            },
            formatDate(value) {
                const date = new Date(value);
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const hours = date.getHours();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
        }
    }
</script>

<style  scoped>
    .el-form-item{
        margin: 10px 30px;
    }
    .handel-btns{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-link{
        margin: 0 5px;
        font-size: 12px;
    }
    .handel-btns{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .ellipsis {
        display:-webkit-box;
        text-overflow:ellipsis;
        overflow:hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient:vertical;
    }
    .el-popover{
        height: 150px;
        overflow: auto;
    }
    .swiper-box{
        margin: 0 100px;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>